<template>
  <div id="app">
    <keep-alive :include="keepLive">
      <router-view class="Router"></router-view>
    </keep-alive>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        routerNames:[]
      }
    },
    computed: {
      /**
       * @description 设置需要缓存的 include：
       * 1.格式是以逗号隔开的页面name,列如：'name,home'；
       * 2.每个页面必须写name值，与include内对应；
       * 3.如果暂无缓存页面，则设置默认值为空数组[],否则所有页面都会被缓存。
       */
      keepLive() {
        return this.routerNames.length !== 0 ? this.routerNames.join(',') : []
      }
    },
    watch: {
      $route() {
            let router = this.$route;
            // 判断页面是否需要缓存
            if(router.meta.keepAlive && this.routerNames.indexOf(router.name) === -1){
              this.routerNames.push(router.name)
            }
            console.log('keepLive>>>',this.keepLive)
      }
    },
    methods: {

    },
    mounted() {
      const iconArr = [
        // 技术图标
        '//at.alicdn.com/t/font_1972496_ca8kmc6k3ug.js'
      ]
      for (let i = 0; i < iconArr.length; i++) {
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = 'https:' + iconArr[i]
        document.body.appendChild(script)
      }
    }
  }
</script>
<style lang="scss">
  #app {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .Router {
    position: absolute;
    height: 100%;
    overflow-y: auto;
  }
</style>
